define( [
  'require',
  'jquery',
  'cropper',
], function( require, jQuery ) {
  /*编辑头像*/
  ( function( $ ) {
    function CropAvatar( $element ) {
      this.$container = $element;

      this.$avatar = this.$container.find( 'img' );
      this.$avatarModal = this.$container.parents( '.wrap' ).siblings( '#avatar_modal' );

      this.$avatarForm = this.$avatarModal.find( '.avatar-form' );
      this.$avatarUpload = this.$avatarForm.find( '.avatar-upload' );
      this.$avatarSrc = this.$avatarForm.find( '.avatar-src' );
      this.$avatarData = this.$avatarForm.find( '.avatar-data' );
      this.$avatarInput = this.$avatarForm.find( '.avatar-input' );
      this.$avatarSave = this.$avatarForm.find( '.avatar-save' );
      this.$avatarBtns = this.$avatarForm.find( '.avatar-btns' );

      this.$avatarWrapper = this.$avatarModal.find( '.avatar-wrapper' );
      this.$avatarPreview = this.$avatarModal.find( '.avatar-preview' );

      this.init();
    }

    CropAvatar.prototype = {
      constructor: CropAvatar,
      support: {
        fileList: !!$( '<input type="file">' ).prop( 'files' ),
        blobURLs: !!window.URL && URL.createObjectURL,
        formData: !!window.FormData
      },

      init: function() {
        this.support.datauri = this.support.fileList && this.support.blobURLs;

        // if (!this.support.formData) {
        //     this.initIframe();
        // }

        // this.initTooltip();
        this.initModal();
        this.addListener();
      },

      addListener: function() {
        this.$container.on( 'click', $.proxy( this.click, this ) );
        this.$avatarInput.on( 'change', $.proxy( this.change, this ) );
        this.$avatarForm.on( 'submit', $.proxy( this.submit, this ) );
        this.$avatarBtns.on( 'click', $.proxy( this.rotate, this ) );
      },

      initModal: function() {
        this.$avatarModal.modal( {
          show: false
        } );
      },

      initPreview: function() {
        var url = this.$avatar.attr( 'src' );
        this.$avatarPreview.empty().html( '<img src="' + url + '">' );
        /*重置*/
        this.stopCropper();
        this.$avatarWrapper.empty();
      },

      click: function() {
        this.$avatarModal.modal( 'show' );
        this.initPreview();
      },

      change: function() {
        var files,
          file;

        if ( this.support.datauri ) {
          files = this.$avatarInput.prop( 'files' );

          if ( files.length > 0 ) {
            file = files[ 0 ];

            if ( this.isImageFile( file ) ) {
              if ( this.url ) {
                URL.revokeObjectURL( this.url ); // Revoke the old one
              }

              this.url = URL.createObjectURL( file );
              this.startCropper();
            }
          }
        } else {
          file = this.$avatarInput.val();

          if ( this.isImageFile( file ) ) {
            this.syncUpload();
          }
        }
      },

      submit: function() {
        if ( !this.$avatarSrc.val() && !this.$avatarInput.val() ) {
          return false;
        }

        if ( this.support.formData ) {
          this.ajaxUpload();
          return false;
        }
      },

      rotate: function( e ) {
        var data;

        if ( this.active ) {
          data = $( e.target ).data();

          if ( data.method ) {
            this.$img.cropper( data.method, data.option );
          }
        }
      },

      isImageFile: function( file ) {
        if ( file.type ) {
          return /^image\/\w+$/.test( file.type );
        } else {
          return /\.(jpg|jpeg|png|gif)$/.test( file );
        }
      },

      startCropper: function() {
        var _this = this;

        if ( this.active ) {
          this.$img.cropper( 'replace', this.url );
        } else {
          this.$img = $( '<img src="' + this.url + '">' );
          this.$avatarWrapper.empty().html( this.$img );
          this.$img.cropper( {
            aspectRatio: 1,
            preview: this.$avatarPreview.selector,
            // strict: false,
            dragCrop: false,
            crop: function( data ) {
              var json = [
                '{"x":' + data.x,
                '"y":' + data.y,
                '"height":' + data.height,
                '"width":' + data.width,
                '"rotate":' + data.rotate + '}'
              ].join();

              _this.$avatarData.val( json );
            }
          } );

          this.active = true;
        }
      },

      stopCropper: function() {
        if ( this.active ) {
          this.$img.cropper( 'destroy' );
          this.$img.remove();
          this.active = false;
        }
      },

      ajaxUpload: function() {
        var url = this.$avatarForm.attr( 'action' ),
          data = new FormData( this.$avatarForm[ 0 ] ),
          _this = this;
        $.ajax( {
          url: url,
          type: 'post',
          data: data,
          dataType: 'json',
          processData: false,
          contentType: false,

          success: function( data ) {
            _this.submitDone( data );
          },

          error: function( XMLHttpRequest, textStatus, errorThrown ) {
            _this.submitFail( textStatus || errorThrown );
          },

        } );
      },

      syncUpload: function() {
        this.$avatarSave.click();
      },

      submitDone: function( data ) {
        if ( data.ret == 0 ) {
          if ( data.data ) {
            this.url = data.data;

            if ( this.support.datauri || this.uploaded ) {
              this.uploaded = false;
              this.cropDone();
            } else {
              this.uploaded = true;
              this.$avatarSrc.val( this.url );
              this.startCropper();
            }

            this.$avatarInput.val( '' );
          } else if ( data.message ) {
            this.alert( data.message );
          }
        } else {
          this.alert( data.msg );
        }
      },

      submitFail: function( msg ) {
        this.alert( msg );
      },

      cropDone: function() {
        this.$avatarForm.get( 0 ).reset();
        this.$avatar.attr( 'src', this.url );
        $( '.top_main_nav .js_face_img' ).prop( 'src', this.url );
        this.stopCropper();
        this.$avatarModal.modal( 'hide' );
      },

      alert: function( msg ) {
        var $alert = [
          '<div class="alert alert-danger avater-alert" style="margin: 0;">',
          '<button type="button" class="close" data-dismiss="alert">&times;</button>',
          msg,
          '</div>'
        ].join( '' );

        this.$avatarBtns.find( '.avt_tit' ).empty().append( $alert );
      }
    };

    return new CropAvatar( $( '.head_portrait' ) );
  } )( jQuery );
} )
